<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<style type="text/css">
		span{
			background: red;
			display: inline-block;
			padding: 10px;
			color:#fff;
			margin: 10px 0;
		}
		.changeColor span{
			background: green;
		}
		.changeLength span:after{
			content: 'length';
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<div id="box">
		<!-- <h1>{{msg}}</h1>
		<h1>{{fun('aa')}}</h1>
		<a v-bind:href="web">web</a>
		<input type="text" v-bind:value="msg" name="">
		<span v-html="html"></span> -->
		<!-- <p>{{age}}</p>
		<button @click="add()">+</button>
		<button v-on:click.once="subtract()">-</button>
		<button v-on:dblclick="add()">+</button>
		<button v-on:dblclick="subtract()">-</button>
		<div id="cavance" v-on:mousemove="updatexy" style="width: 300px;padding:200px 60px;border: 1px soild #00ffff;text-align: center;">{{x}},{{y}}
			<span @mousemove.stop="">dasdsadasdasd</span>
		</div> -->
		<!-- name:<input type="text" ref="name" v-on:keyup='namechange'>
		<span>{{name}}</span>
		age:<input type="text" ref="age" @keyup='agechange'>
		<span>{{age}}</span> -->
		<!-- name:<input type="text" v-model="name">
		<span>{{name}}</span>
		age:<input type="text" v-model="age">
		<span>{{age}}</span> -->
		<!-- <h1>计算器</h1>
		<button @click="a++">Add to A</button>
		<button @click="b++">Add to B</button>
		<p>A:{{a}}</p>
		<p>B:{{b}}</p>
		<p>Age+A={{addToA}}</p>
		<p>Age+B={{addToB}}</p> -->
		<!-- <h1>dynamic class</h1> -->
		<!-- <h2>demo 1</h2>
		<div v-bind:class="{changeColor:changeColor}" v-on:click="changeColor = !changeColor">
			<span>chuck</span>
		</div> -->
		<!-- <h2>demo 2</h2>
		<div v-bind:class="comClass" v-on:click="changeColor = !changeColor,changeLength = !changeLength">
			<span>chuck</span>
		</div> -->
		<!-- <button @click="success= !success">btn</button>
		<p v-show="success">success</p> -->
		<green></green>
	</div>
	<script type="text/javascript">
		Vue.component(
			'green',{
				template:`<p>
				{{name}} hi chuck
				<button @click='change'>change name</button>
				</p>
				`,
				data:function(){
					return {
						name:'chuck'
					}
				},
				methods:{
					change:function(){
						this.name = 'ychuck';
					}
				}
			} 
		);
		var vue = new Vue({
			el:'#box',
			data:{
				// success:false
				// changeColor:false,
				// changeLength:false
				// a:0,
				// b:0,
				// age:20
				// name:"dada",
				// age:"dada"
				// x:0,
				// y:0,
				// age:18
				// msg:'chuck',
				// web:'http://baidu.com',
				// html:'<a href="http://qq.com">qq</a>'
			},
			methods:{
				// fun:function(time) {
				// 	// body...
				// 	return 'good '+time + " " + this.msg;
				// }
				// add:function(){
				// 	this.age++;
				// },
				// subtract:function(){
				// 	this.age--;
				// },
				// updatexy:function(event){
				// 	// console.log(event);
				// 	this.x = event.offsetX;
				// 	this.y = event.offsetY;
				// }
				// namechange:function(){
				// 	console.log(this.$refs.name.value);
				// },
				// agechange:function(){
				// 	this.age = this.$refs.age.value;
				// }
				// addToA:function(){
				// 	console.log('a');
				// 	return this.age + this.a;
				// },
				// addToB:function(){
				// 	console.log('b');
				// 	return this.age + this.b;
				// }	
			},
			computed:{
				// comClass : function(){
				// 	return {
				// 		changeColor:this.changeColor,
				// 		changeLength:this.changeLength
				// 	}
				// }
				// addToA:function(){
				// 	console.log('a');
				// 	return this.age + this.a;
				// },
				// addToB:function(){
				// 	console.log('b');
				// 	return this.age + this.b;
				// }	
			}
		});
	</script>
</body>
</html>